    const path = require('path')
    const webpack = require('webpack')
    const htmlWebpackPlugin = require('html-webpack-plugin')
    const VueLoaderPlugin = require('vue-loader/lib/plugin');


    // const {VueLoaderPlugin} = require('vue-loader')
    module.exports = {
        entry: path.join(__dirname, './src/main.js'),
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: 'bundle.js'
        },


        // devServer: {
        //     // 热更新  --open --port 3000 --contentBase src --hot
        //     open: true, // 自动打开浏览器
        //     port: 3000, // 设置启动时候的运行端口
        //     contentBase: 'src', // 指定托管的根目录
        //     hot: true // 启用热更新 的 第1步
        // },


        plugins: [
            // 配置插件的节点 这是 启用热更新的第 3 步
            // new webpack.HotModuleReplacementPlugin(), 
            new htmlWebpackPlugin({
                template: path.join(__dirname, './src/index.html'),
                filename: 'index.html'
            }),
            new VueLoaderPlugin()

        ],


        module: {
            // 配置所有第三方loader模块
            rules: [
                { test: /\.css$/, use: ['style-loader', 'css-loader'] },
                { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
                { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
                { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' },
                { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
                { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //配置Babel来转换高级的ES语法
                { test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
            ]
        },

        resolve: {
            alias: {
                "vue$": "vue/dist/vue.js" //修改导入包路径`
            }
        }




    }